<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Issue_C</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./js/echarts/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/cookie.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/world.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">中国与东盟十国合作关系</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li ><a href="/issue_A.html">与东盟十国合作态势变化（年份-学科）<span class="sr-only">(current)</span></a></li>
                <li><a href="/issue_B.html">与东盟十国的合作态势（年份-国家）</a></li>
                <li class="active"><a href="/issue_C.html">与东盟十国的合作态势（地图）</a></li>
                <li><a href="/issue_D.html">发文机构占比</a></li>
                <li><a href="/issue_G.html">各东盟在核心领域的作者</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="app">
    <div id="issue_c" class="item"></div>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            issue_c: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {},
                    d: []
                }
            }
        },
        methods: {
            series: function () {

            },
            req: async function (addr) {
                let e = await reqXXX(addr);
                let obj = JSON.parse(e.currentTarget.responseText);
                let self = this;
                self.issue_c.data.d = [];
                Object.keys(obj).forEach(function (year) {
                    self.issue_c.data.d.push({
                        name: year.charAt(0).toUpperCase() + year.substring(1),
                        value: obj[year]
                    });
                })
                console.log("d: ", self.issue_c.data.d);
                // this.issue_c.data.data_ = obj;
            },
        },
        computed: {},
        mounted:async function () {
            await this.req("/issue_c");
            initEcharts(this.issue_c, document.getElementById("issue_c"), "中国与东亚十国合作态势（1999-2020）", this.series);
            this.issue_c.eChart.setOption({
                label:{show:true},
                xAxis: {},
                yAxis: {},
                legend: {},
                toolbox: {},
                tooltip: {
                    trigger: 'item',
                },
                visualMap: {
                    min: 0,
                    max: 8000,
                    text: ['多', '少'],
                    realtime: true,
                    calculable: true,
                    color: ['red', 'yellow', 'lightskyblue']
                },
                series: [{
                    name: "中国与东盟十国合作关系",
                    type: 'map',
                    mapType: 'world',
                  //  map:"Test",
                    label:{show:true},
                    roam: true,
                    itemStyle: {
                        emphasis: {label: {show: true}}
                    },
                    data: this.issue_c.data.d,
                    //center:[23.380664062500017,-17.640625]
                }]
            });
        },

    });
</script>
</html>